<template>
   <div>
      <h1>常见水果</h1>
      <table>
          <thead>
            <tr>
                <th>编号</th>
                <th>名称</th>
                <th>价格</th>
                <th>描述</th>
            </tr>
          </thead>
          <tbody>
            <tr v-for="item in list" :key="item.id">
                <td>{{item.id}}</td>
                <td>{{item.name}}</td>
                <td>{{item.price}}</td>
                <td>{{item.desc}}</td>
            </tr>
          </tbody>
      </table>
   </div>
</template>

<script>
export default {
    data(){
        return{
            list:[]
        }
    },
    created(){
       this.getFruits()
    },
    methods:{
        async getFruits(){
            const result=await fetch("https://www.fastmock.site/mock/d550ebe10fa16e11d2e101275d951ca5/w16/api/getFruits").then(response=>response.json())
            console.log('result',result);
            this.list=result
       }
    }

}
</script>

<style>
  table{
    width:700px;
    border-collapse: collapse;
  }
  td,th{
    border: 1px solid #ccc;
    padding: 10px;
    text-align: center;
  }
</style>